<template>
  <div>
      <div class="main">
          <div class="film">
              <div class="film-header">
                  <div class="goback" @click="go()">
                      <img src="@/assets/goback.png" alt="">
                  </div>
                  <div class="title">
                      {{datalist.name}}
                  </div>
                  <div class="right">
                      <div>
                          <i class="iconfont icon-sousuo"></i>
                      </div>
                  </div>
              </div>
              <div class="dateWrap">
                  <div class="tabs-bar">
                      <ul class="tabs-nav">
                          <li v-for="(date,index) in price.showCinemas" :key="index" @click="getlist(date.cinemaList,index)" :class="day == index?'ac':''">
                              <span>{{new Date(parseInt(date.showDate) * 1000).toLocaleString().slice(5, 10).replace('/', '月') + '日'}}</span>
                          </li>
                      </ul>
                  </div>
              </div>
              <div class="filter">
                  <div class="tab">
                      <div :class="{district:true,clicked:isclick}" @click="showCity">
                          全城
                          <!-- <img src="@/assets/up.png" alt=""> -->
                          <img src="@/assets/toggle.png" alt="">
                      </div>
                      <div class="specify">
                          最近去过
                          <!-- <img src="@/assets/up.png" alt=""> -->
                          <img src="@/assets/toggle.png" alt="">

                      </div>
                  </div>
              </div>
              <div class="filter-box" style="display:none" ref="show">
          <div class="filter-wrap">
              <ul class="district-list">
                  <li>
                      <div class="selected" @click="goall">全城</div>
                  </li>
                  <li v-for="(item,index) in arr" :key="index" @click="showlist(index,item.townName)" ref="showclass">
                      <div>{{item.townName}}</div>
                    </li>
                    
              </ul>
          </div>
      </div>
              <div class="cinema-list">
                  <div class="cinema-item" v-for="(item,index) in citycinema" :key="index" @click="goto(item.cinemaId)">
                      <div class="cinema-detail">
                          <div class="left">
                              <div class="cinema-name">
                                  {{item.name}}
                              </div>
                              <div class="cinema-address">
                                  {{item.address}}
                              </div>
                          </div>
                          <div class="right">
                              <span>
                                  <span class="cinema-lowPrice">
                                      <i>￥</i>
                                      <span class="interge" v-for="(p,index) in price.cinemaExtendList" :key="index">{{item.cinemaId===p.cinemaId ? p.lowPrice/100:''}}</span>
                                  </span>
                                  <span class="qi">起</span>
                              </span>
                              <div class="distance">距离未知</div>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
import {getCinemalist,getCinemaPrice,getDetail} from '@/api'
import Bus from '@/components/bus/bus.js'
import '@/assets/all/iconfont.css'
export default {
    data() {
        return {
            isShow:false,
            list:[],
            price:[],
            films:[],
            id:'',
            cityid:Number,
            datalist:[],
            istrue:false,
            cinemalist:[],
            day:'0',
            arr:[],
            isclick:false,
            citycinema:[]
        }
    },
    // computed: {
    //     cityid(){
    //         return 
    //     }
    // },
created() {
   this.getlist(this.cinemalist,this.day)
   this.cityid = JSON.parse(localStorage.getItem('cityId'))
   this.getdata(this.id)
    getCinemaPrice(this.id,this.cityid).then(res=>{
        this.price = res.data.data
        // console.log(this.price.showCinemas[0].cinemaList)
        this.cinemalist = this.price.showCinemas[0].cinemaList
        getCinemalist(this.cityid,this.cinemalist.join(',')).then(res=>{
        this.list=res.data.data.cinemas
        this.citycinema = this.list
        this.arr =this.list.map(item=>{
            return{
                townName:item.districtName
            }
        })
        this.quchong(this.arr)
    })
    })
    
},
watch: {
    $route:{
        handler(n,o){
            this.id = n.params.cinemaid
            this.getname(this.id)
            console.log(this.id)
        },
        deep:true,
        immediate:true
    }
},

methods: {
     go(){
            this.$router.go(-1)
        },
    getdata(id){
    //      getCinemalist(this.cityid,this.cinemalist.join(',')).then(res=>{
    //     this.list=res.data.data.cinemas
    // })
    // getCinemaPrice(id,this.cityid).then(res=>{
    //     this.price = res.data.data
    //     console.log(this.price)
    // })
    },
    getname(id){
        getDetail(id).then(res=>{
        this.datalist = res.data.data.film
        
    })
    },
    goto(id){
        this.$router.push('/cinemasdetail/'+id)
    },
    getlist(list,index){
        this.cinemalist = list
        getCinemalist(this.cityid,this.cinemalist.join(',')).then(res=>{
        this.list=res.data.data.cinemas
        this.citycinemal = this.list
        this.day = index 
    })
    },
    quchong(arr){
        let obj = {};
        this.arr = arr.reduce((prev,next)=>{
            
				obj[next.townName] ? "" : obj[next.townName] = true && prev.push(next);
				return prev; 
        },[])
        // this.attr.unshift({townName:'全城'})
        console.log(this.arr)
    },
    showCity(){
        this.isclick = !this.isclick
        this.$refs.show.style.display = this.isclick ? "":"none"
    },
    showlist(index,name){
        this.$refs.showclass[index].classList.add('clicked')
        for(var i=0;i<this.arr.length;i++){
            if(i!=index){
                this.$refs.showclass[i].classList.remove('clicked')
                this.citycinema=this.list.filter(item=>{
                    return item.districtName === name
                })
            }
        }
    },
    goall(){
        this.citycinema = this.list
    }
},
}
</script>

<style lang="scss" scoped>
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
        .clicked{
            color: #ff5f16 !important;
        }
ul,ol{
    list-style: none;
}
.main{
    height: 100%;
}
.film{
    background-color: #fff;
    min-height: 100vh;
}
.film-header{
            position: fixed;
            background-color: hsla(0,0%,100%,0);
            color: transparent;
            transition: all .3s ease;
            width: 100vw;
            height: 44px;
            z-index:9999;
            transition: all .3s ease;
            background-color: #fff;
            color: #191a1b;
            display: flex;
            .goback {
                height: 30px;
                position: absolute;
                top: 5px;
                left: 5px;
                img {
                    width: 30px;
                    }
                }
            .title{
                font-size: 17px;
                line-height: 44px;
                width: 100vw;
                text-align: center;
                }
                .right{ 
                    width: 15%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-right: 15px;
                    div{
                        width: 100%;
                        text-align: right;
                        i{
                           display: block;
                            font-size: 26px;
                            color: #191a1b; 
                        }
                    }
                }
            }
            .film-header:after {
                content: " ";
                position: absolute;
                left: 0;
                bottom: 0;
                right: 0;
                height: 1px;
                // border-bottom: 1px solid #ededed;
                color: #ededed;
                transform-origin: 0 100%;
                transform: scaleY(.5);
                }
    .dateWrap{
            padding-top: 44px;
            // z-index: 2999;
            position: relative;
            z-index: 100;
            width: 100%;
            overflow-x: hidden;
            background: #fff;
            .tabs-bar {
                height: 49px;
                display: flex;
                align-items: center;
                overflow-x: auto;
                overflow-y: hidden;
                transition: transform .2s cubic-bezier(.35,0,.25,1);
                position: relative;
                .tabs-nav {
                    display: flex;
                    display: -webkit-flex;
                    justify-content: flex-start;
                    align-items: center;
                    position: relative;
                    width: 100%;
                    height: 100%;
                    li {
                        flex-shrink: 0;
                        color: #191a1b;
                        text-align: center;
                        height: 100%;
                        line-height: 50px;
                        font-size: 14px;
                        cursor: pointer;
                        padding: 0 15px;
                        &.ac{
                            color: #ff5f16;
                            border-bottom: 2px solid #ff5f16;
                        }
                        }
                        
                }
            }
    }
    .filter{
        .tab{
            height: 49px;
            width: 100%;
            padding: 15px 0;
            position: relative;
            z-index: 2999;
            background-color: #fff;
            .district,.specify{
                font-size: 14px;
                line-height: 20px;
                text-align: center;
                color: #191a1b;
                float: left;
                width: 50%;
                img {
                    vertical-align: middle;
                    padding-left: 2px;
                    width: 7px;
                    height: 3px;
                }
            }
                }
                .tab:after {
                    content: " ";
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    right: 0;
                    height: 1px;
                    border-bottom: 1px solid #ededed;
                    color: #ededed;
                    transform-origin: 0 100%;
                    transform: scaleY(.5);
                }
    }
    .filter-box{
    top: 142px;
    z-index: 2998!important;
    right: auto;
    bottom: auto;
    left: 50%;
    transform: translate3d(-50%,0,0);
    position: fixed;
    background: #fff;
    backface-visibility: hidden;
    transition: .2s ease-out;
    .filter-wrap{
        width: 100vw;
        .district-list{
            list-style: none;
            padding: 10px 0 0;
            margin: 0 0 0 10px;
            display: flex;
            justify-content: flex-start;
            align-content: center;
            flex-wrap: wrap;
            li{
                font-size: 12px;
                display: inline-block;
                width: calc((100vw - 50px)/4);
                padding-bottom: 15px;
                padding-right: 10px;
                color: #797d82;
                height: 30px;
                flex-shrink: 1;
                div {
                    position: relative;
                    border-radius: 3px;
                    text-align: center;
                    height: 30px;
                    line-height: 27px;
                }
                .selected{
                    color: #ff5f16;
                }
            }
        }
    }
    }
    .cinema-list{
        position:relative;
        .cinema-item{
            padding: 15px;
            position: relative;
            .cinema-detail{
                height: 45px;
                display: flex;
                .left {
                    width: calc(100vw - 100px);
                    .cinema-name{
                    font-size: 15px;
                    margin-bottom: 5px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    }
                    .cinema-address{
                        font-size: 13px;
                        color: #797d82;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                }
                .right{
                    color: #ff5f16;
                    width: 70px;
                    text-align: right;
                    .cinema-lowPrice{
                        font-size: 15px;
                        color: #ff5f16;
                        height: 0!important;
                        display: inline-table!important;
                        float: none!important;
                        span{
                            float: none!important;
                        }
                        i {
                            font-size: 11px;
                            font-style: normal;
                        }
                        .interge{
                            font-size: 15px;
                        }
                    }
                    .distance{
                        color: #797d82;
                        font-size: 10px;
                        line-height: 26px;
                    }
                }
            }
        }
    }
</style>